<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<canvas id="canvas" width="800" height="800"></canvas>
<script>

  var x = 100, y = 100, a = 200, b = 150;
  var canvas = document.getElementById('canvas');
  var cxt = canvas.getContext('2d');

  cxt.translate(200,200); // 设定原点


  for (var i = 0; i < 2 * Math.PI; i += Math.PI/12)
  {
    cxt.beginPath();

    cxt.arc(x + a * Math.cos(i), y + b * Math.sin(i), 10, 0, 2*Math.PI,true);
    cxt.closePath();
    cxt.stroke();
  }




</script>
</body>
</html>